способы проверки вёрстки

[cyklop77]

интересно знать кто какими способами проверки качества вёрстки обычно пользуется? можете к этому списку добавить что-нибудь важное?

[F315]

по-моему, встроенный валидатор не все ловит, использую только для проверки на скорую руку

лучше юзать валидаторы W3C

http://validator.w3.org/ - для html

http://jigsaw.w3.org/css-validator/ - для css

[cyklop77]

валидаторы да, это само собой.

кстати можно еще использовать вот такой валидатор. но это только в том случае, если страница была оптимизирована в первую очередь под яндекс.

[web-monster]

Ссылка проверяйте на здоровье

[F315]

Ссылка проверяйте на здоровье

спасибо за ссылку

отличная статья!

[SelenIT]

Еще пара мелочей в порядке имха: отключение стилей — текст должен остаться логичным и понятным. Отключение картинок — надписи должны остаться читаемыми. Масштабирование — блоки не должны съезжать, при масштабировании только текста (FF - "Zoom Text only") надписи не должны пропадать при масштабировании хотя бы на 2 шага в обе стороны (сейчас, возможно, не так актуально, но тоже показатель качества верстки, особенно для информационных сайтов).

Формы — навигация tab-ом не должна приносить сюрпризов, кнопки, в идеале, должны получать фокус и нажиматься без мышки.

Если используется HTML5, полезно проверить логическую структуру outliner-ом (напр., этим). Поскольку новые браузеры любую разметку воспринимают как HTML5, это в любом случае не завредит .

по-моему, встроенный валидатор не все ловит

Если речь про FF-овский HTML Validator, то у него просто три режима — Tidy (по умолчанию), SGML (оффлайновый аналог W3C-шного) и оба вместе (сперва второй, потом первый). Они неплохо дополняют друг друга (напр., tidy ловит нелепые ошибки типа <div/>, которые пропускает W3C-шный для XHTML, зато ругается на некрасивые, но формально допустимые пустые спаны). Только надо помнить, что tidy — не валидатор в строгом смысле, а скорее "советчик по улучшению стиля кода". Увы, название аддона лишь плодит путаницу...

[psywalker]

интересно знать кто какими способами проверки качества вёрстки обычно пользуется? можете к этому списку добавить что-нибудь важное?

Вот, кстати, немного пунктов от меня. Взял отсюда

1. Качественную вёрстка должна быть пуленепробиваемой, пожаростоякой и прочной. Т.е. например чтобы я смело мог засунуть в любые блоки, какой угодно контент, картинки, текст и прочее и чтобы при этом она не развалилась и не поехала.

2. Качественная вёрстка должна быть секционная и независимая, т.е. сделана независимыми блоками и поделена на секции, каждая из которых представляет собой самодостаточный объект со своими элементами. Например - это Хедер, Футер и т.д. Т.е. например, чтобы я смело мог выдернуть из структуры блок Хедер и при этом на остальные секции это ни оказало никакого влияния. Как пример - они встали на

место хедера в потоке, и всё.

3. В качественной вёрстке все отдельные блочки в секциях должны тоже быть продуманы, например они могут быть переносимыми блоками, т.е. свободно мигрировать из секции в секцию, и например плясать от контекста. Так же они тоже должны быть качественно сделанными, как пункт 1.

4. Качественной вёрстка должна быть устойчивой к размерам шрифта и разрешениям экрана, должна быть по максимуму масштабируемой, хотя бы на -+2 размера шрифта. И чтобы сделано это было правильно, а не косячно.

5. Код качественной вёрстки должен быть красивым, понятным и организованным, причём не только для автора, но и для людей со-стороны. Т.е. должна быть чёткая, продуманная организация в тех же стилях.

6. А так же код качественной вёрстки должен быть написан с умом и продуман, а не лишь бы как. Т.е. например плохо страдать минимализмом и не использовать классы, где это нужно или например жадничать лишними дивами, там, где они могут реально помочь и дать только плюсы.

Т.е. думать над каждой деталькой и блоком в целом.

7. Качественная вёрстка должна быть рассчитана на будущее, т.е. всегда нужно думать о будущем этой вёрстки, о том, как с ней смогут работать программеры, как эта вёрстка сможет поддерживаться в будущем, примерно где и что, какие блоки могут быть заменены или в них будут вноситься правки, вставляться элементы, какие-то части и прочее.

В общем нужно делать вёрстку не на сегодняшний день, а продумывать её будущее на много ходов вперёд.

8. Качественная вёрстка со стороны должна выглядеть так, чтобы её вид создавал впечатление чёткости, продуманности, качества и т.д. Т.е. например чтобы по её виду, можно было смело сказать, что люди, которые над ней работали, постарались покрополить над каждой деталькой, думали над каждым пикселем.

Например в глаза может сразу броситься, небрежно сделанные отступы с разных сторон, где-то вылезает уголок на пиксель, где-то кегель шрифта одного абзаца не совпадает с рядом стоящим, точно таким же абзацем и всё, всё, всё в этом духе. Мелочей на самом деле уйма и Имхо, качественное отношение к работе видно сразу. Даже маленькие пиксели играют большую роль в этом деле.

9. Качественная вёрстка должна выглядеть почти одинаково (в идеале одинаково) во-всех оговоренных в Т3 браузерах, если об исключениях не оговорено отдельно. Так же эта вёрстка должна абсолютно одинаково выполнять свои функции во-всех браузерах, опять же, оговоренными в тех-задании. Т.е. например в ФФ любые элементы должны обладать идентичными возможностями с этими же элементами в ИЕ6. Не должно быть такого, например, что в ФФ я могу засунуть в хедер картинку, а в ИЕ6 не могу и т.д.

Ну вот, пожалуй в кратце описал своё видение качественной вёрстки. Всё это конечно утрировано, и естественно я не призываю следовать всем пунктам в обязательном порядке. Просто лично для себя, всегда стараюсь по максимуму им следовать, вот и всё.

[F315]

(напр., tidy ловит нелепые ошибки типа <div/>, которые пропускает W3C-шный для XHTML

такие ошибки W3C ловит и с XHTML 1.0 Transitional, и с XHTML 1.0 Strict

не поленилась, проверила только что (остальные доктайпы просто не чекала)

Edited August 23, 2011 by F315

[SelenIT]

Только что проверил в онлайновом валидаторе:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <title>111</title>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
 </head>
 <body>
   <!-- АГА!!! --><div/>
 </body>
</html>

результат — "This document was successfully checked as...". Что, формально, справедливо (XHTML — это XML, а там <div></div> и <div/> — одно и то же), но в реальной жизни (при отдаче существующим браузерам в виде text/html, как обычно и бывает) не утешает.

Буду благодарен за ссылку на методику валидации, при которой это ловится...

[F315]

Буду благодарен за ссылку на методику валидации, при которой это ловится...

приходит в голову только тупой способ - прогнать через валидатор с доктайпом HTML 4.01

но это, если не лень разгребать кучу псевдоошибок

[SelenIT]

Сорри, фразу

такие ошибки W3C ловит и с XHTML 1.0 Transitional, и с XHTML 1.0 Strict

не поленилась, проверила только что

я понял так, что вы проверяли подобный код FF-овским аддоном в режиме W3C-валидатора, и он отметил это как ошибку. Вот я и подумал, что, вероятно, теперь там по дефолту включена галка "учитывать тип" или что-то в этом роде. Потому что, когда я последний раз пользовался аддоном, эта проблема в нем была, как и в онлайновом валидаторе сейчас. А вот в режиме Tidy такие ошибки и раньше легко ловились...

[F315]

я понял так, что вы проверяли подобный код FF-овским аддоном в режиме W3C-валидатора, и он отметил это как ошибку.

не, проверяла W3C-валидатором (не плагином мозилы)

он ловит ошибку

<div><div/>

но не видит

<div/>

[SelenIT]

Ясно. Тоже логично — в первом случае, с точки зрения xml-веллформности, вложенность нарушена, а во втором нет. А вот для HTML-парсера и то, и другое — незакрытые теги...